<template>
  <div class="goods-alter">
    <div class="form-item">
      <el-form ref="form" :model="form" label-width="100px">
        <div class="goods-alter-item">
          <el-form-item label="商品名称">
            <el-input v-model="form.goodsName"></el-input>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="商品描述">
            <el-input type="textarea" v-model="form.goodsDesc"></el-input>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="商品类型">
            <el-select v-model="form.goodsType" placeholder="请选择商品类型">
              <el-option label="夜宵" value="midnightsnack"></el-option>
              <el-option label="小吃" value="snack"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="商品单价">
            <el-input placeholder="请输入价格，例如: 6.5" v-model="form.goodsPrice">
              <template slot="prepend">¥ </template>
            </el-input>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="商品库存">
            <el-input placeholder="请输入商品剩余件数，例如: 15" v-model="form.goodsRemain">
              <template slot="append">件/份</template>
            </el-input>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="当前图片">
            <img v-if="currentImg" :src="form.currentImg" alt="">
            <span v-else>暂无图片</span>
          </el-form-item>
        </div>
        <div class="goods-alter-item">
          <el-form-item label="新的商品图片">
            <el-upload
              drag
              action="https://jsonplaceholder.typicode.com/posts/">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            </el-upload>
          </el-form-item>
        </div>
        <div class="goods-alter-item goods-alter-sj">
          <el-radio-group v-model="form.isSell">
            <el-radio :label="1">同时上架销售</el-radio>
            <el-radio :label="2">暂不销售，仅保存到仓库</el-radio>
          </el-radio-group>
        </div>
        <div class="goods-alter-item">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoodsAlter',
  data () {
    return {
      form: {
        goodsName: '',
        goodsDesc: '',
        goodsType: '',
        goodsPrice: '',
        goodsRemain: '',
        currentImg: '',
        isSell: 1
      }
    }
  },
  methods: {
    onSubmit () {
      alert('submit!')
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .goods-alter
    width: $width
    margin: 0 auto
    position: relative
    .form-item
      .el-form
          position: absolute
          right: 0px
          top: 0px
          width: 83%
          background-color: #fff
          padding-left 170px
          box-sizing border-box
      .goods-alter-item
        width: 60%
        margin: 20px 0
        .goods-alter-sj
          margin-left 120px
        .el-button
          margin-left 120px
</style>
